<script lang="ts" setup>
import X6DynamicWidget from "@/components/x6/X6DyanmicWidget.vue";
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import "@antv/x6-vue-shape";
import { Graph } from "@antv/x6";
import store from "@/store";
import { useGraphEvent } from "@/components/x6/hooks/event";

const x6ContainerRefEl = ref();
const graph: Ref<Graph | null> = ref(null);

const magnetAvailabilityHighlighter = {
  name: "stroke",
  args: {
    attrs: {
      fill: "#fff",
      stroke: "#47C769",
    },
  },
};

onMounted(() => {
  Graph.registerNode("vue-view-shape", {
    inherit: "vue-shape",
    width: 150,
    height: 100,
    component: X6DynamicWidget,
  });
  const instance = new Graph({
    container: x6ContainerRefEl.value,
    highlighting: {
      magnetAvailable: magnetAvailabilityHighlighter,
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#fff",
            stroke: "#31d0c6",
          },
        },
      },
    },

    autoResize: true,
    grid: true,
    clipboard: {
      enabled: true,
    },
    selecting: {
      enabled: true,
      multiple: true,
      rubberband: true,
      movable: true,
      showNodeSelectionBox: true,
    },
    snapline: {
      enabled: true,
    },
    scroller: {
      enabled: false,
    },
    resizing: {
      enabled: true,
    },
  });

  graph.value = instance;

  useGraphEvent(instance);
  store.commit("setGraph", instance);
});
</script>
<template>
  <div class="x6-container" ref="x6ContainerRefEl"></div>
</template>
<style scoped lang="less">
.x6-container {
  width: 100%;
  height: 100%;
}
</style>
